<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
          :is_mt="true"
          :is_notice="false"
          :is_back="true"
          :is_name="true"
          :title="title"
      ></gltitle>
    </template>
    <template #content>
      <div class="container">
        <div class="head_list">
          <div class="title">
            <div class="r">
              <div class="levt">{{ $t("page.doc102") }}：</div>
              <div class="levt_name">{{ datas.userLevel }}-Star Package</div>
            </div>
            <div class="lv-img">
              <span>VIP{{ datas.userLevel }}</span>
            </div>
          </div>
          <ul>
            <li>
              <div class="data">{{ common.decal2(datas.todayIncome) }}</div>
              <div class="til">{{ $t("page.doc73") }}(USDT)</div>
            </li>
            <li>
              <div class="data">{{ common.decal2(datas.totalIncome) }}</div>
              <div class="til">{{ $t("page.doc107") }}(USDT)</div>
            </li>
          </ul>
        </div>

        <div class="sp">
          {{ $t("page.doc108") }}
        </div>

        <div class="box2">
          <template v-for="item in levels">
            <div class="it" v-if="item.level !== 0" :key="item.level">
              <div class="tit">{{ item.level }}-Star Package</div>
              <ul class="bet">
                <li>
                  <div
                      class="s"
                      v-if="item.incomeDailyCount >= 10 && language == 'sl_SI'"
                  >
                    {{ item.incomeDailyCount }} {{ $t("page.doc103_1") }}
                  </div>
                  <div class="s" v-else>
                    {{ item.incomeDailyCount }} {{ $t("page.doc103") }}
                  </div>
                  <div class="n">{{ $t("page.doc109") }}</div>
                </li>
                <li>
                  <div v-if="item.hasOpen" class="s">
                    {{ item.levelRemainingDays }} {{ $t("page.doc105") }}
                  </div>
                  <div v-else class="s">
                    {{ item.expirationDays }} {{ $t("page.doc105") }}
                  </div>
                  <div v-if="item.hasOpen" class="n">
                    {{ $t("page3.doc82") }}
                  </div>
                  <div v-else class="n">{{ $t("page.doc110") }}</div>
                </li>
                <li>
                  <div class="s s2">
                    <span>{{ common.decal2(item.incomeAmount) }}</span
                    >USDT
                  </div>
                  <div class="n">{{ $t("page.doc111") }}</div>
                </li>
              </ul>

              <!-- 已达到购买限额 -->
              <button
                  class="btn btn3"
                  v-if="
                  item.purchaseLimit > 0 &&
                  item.hasOpen == false &&
                  item.userBuyCount >= item.purchaseLimit
                "
              >
                {{ $t("page3.doc115") }}
              </button>

              <!-- 立即开通 -->
              <button
                  class="btn btn2"
                  @click="onGo(item)"
                  v-else-if="
                  (item.hasOpenBuy &&
                    item.purchaseLimit == 0 &&
                    item.hasOpen == false) ||
                  (item.purchaseLimit > 0 &&
                    item.hasOpen == false &&
                    item.userBuyCount < item.purchaseLimit)
                "
              >
                <div
                    class="count-down-box"
                    v-if="item.vipPromotionCountdown > 0"
                >
                  {{ item.promotionPrice || 0 }} USDT
                  <span class="count-down">
                    {{ $t("new.doc58") }}：<van-count-down
                      @finish="onFinish"
                      :time="item.vipPromotionCountdown * 1000"
                  ></van-count-down>
                  </span>
                </div>
                <template v-else
                >{{ item.price }} USDT {{ $t("page.doc113") }}
                </template
                >
              </button>

              <!-- 做任务 评分获取收益 -->
              <button
                  class="btn btn1"
                  @click="path_url('/income/scenter', item.level)"
                  v-else-if="item.hasOpen"
              >
                {{ $t("page3.doc69") }}
                <!-- （{{ item.incomeDailyUseCount }}/{{
                  item.incomeDailyCount
                }}） -->
              </button>
              <div v-else>
                <!-- 即将开放 -->
                <button class="btn btn3">{{ $t("page3.doc92") }}</button>
              </div>
            </div>
          </template>
        </div>
      </div>

      <van-popup
          v-model="password_show"
          round
          :position="is_position"
      >
        <div class="password_pop">
          <div class="pass">
            <div class="title rel tac">
              {{ $t("page.doc28") }}
              <div class="abs" @click="passwordShowClick">
                <van-icon name="cross"/>
              </div>
            </div>
            <div class="box rel" :class="{ on: isPc }">
              <input
                  type="text"
                  v-model="password"
                  maxlength="6"
                  class="abs"
                  ref="getFocus"
              />
              <van-password-input
                  :gutter="20"
                  :value="password"
                  :length="6"
                  :focused="showKeyboard"
                  @focus="showKeyboard = true"
              />
            </div>
            <button @click="getBtn" :disabled="isDisable">
              {{ $t("page.doc29") }}
            </button>
          </div>
          <div class="jianpan" v-if="!isPc">
            <p>{{ $t("page.doc30") }}</p>
            <van-number-keyboard
                v-model="password"
                :show="showKeyboard"
                @blur="showKeyboard = true"
            />
          </div>
        </div>
      </van-popup>
    </template>
    <template #footer>
      <glFooter :activeTitle="activeTitle"></glFooter>
    </template>
  </page-scroll>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      title: this.$t("title.doc40"),
      activeTitle: "income",

      datas: [],

      levelId: "",
      password: "",
      showKeyboard: true,
      password_show: false,
      isDisable: false,
      isPc: false,
      is_position: "bottom",
      dayTime: [],
      levels: [],
      level: "1",
      language:
          localStorage.getItem("language") == null
              ? "en_US"
              : localStorage.getItem("language"),
    };
  },

  mounted() {
    this.getList();
    this.getLevel();
  },

  methods: {
    ...mapMutations(["SET_GEADE"]),
    passwordShowClick() {
      this.password_show = false;
      this.password = "";
    },
    getDay(startTime, endTime) {
      let runTime = parseInt((endTime - startTime) / 1000);
      let year = Math.floor(runTime / 86400 / 365);
      runTime = runTime % (86400 * 365);
      let month = Math.floor(runTime / 86400 / 30);
      runTime = runTime % (86400 * 30);
      let day = Math.floor(runTime / 86400);
      runTime = runTime % 86400;
      let hour = Math.floor(runTime / 3600);
      runTime = runTime % 3600;
      let minute = Math.floor(runTime / 60);
      runTime = runTime % 60;
      let second = runTime;
      let result = {
        year,
        month,
        day,
        hour,
        minute,
        second,
      };

      return result;
    },
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levels = res.data;
          setTimeout(() => {
            this.request = false;
          }, 1000);
        } else {
          this.$toast(res.message);
        }
      });
    },

    getList() {
      this.$post(this.URL.wallet.infoNew, {}).then((res) => {
        if (res.code == 0) {
          this.datas = res.data;

          var oDate1 = Date.parse(new Date()); // 获取当前日期
          var oDate2 = Date.parse(this.datas.levelExpirationDate); // 指定未来时间
          if (
              this.getDay(oDate1, oDate2).day == 0 &&
              this.getDay(oDate1, oDate2).hour == 0 &&
              this.getDay(oDate1, oDate2).minute == 0 &&
              this.getDay(oDate1, oDate2).second == 0 &&
              this.getDay(oDate1, oDate2).month == 0
          ) {
            this.dayTime = 0;
          } else {
            this.dayTime = this.getDay(oDate1, oDate2);
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
    onFinish() {
      if (this.request) return;
      this.request = true;
      this.getLevel();
    },
    onGo(item) {
      if (!this.$store.state.userData.hasSetPassword) {
        this.$toast(this.$t("page.doc114"));
        this.$router.push({
          path: "/my/password_trade",
          query: {},
        });
        return;
      }

      this.levelId = item.id;
      this.level = item.level;
      this.password_show = true;
      this.$nextTick(function () {
        // 下面打开手机上会出现两个键盘
        // this.$refs.getFocus.focus();
      });
    },
    getBtn() {
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 1000);

      if (!this.isDisable) {
        return;
      }
      let pass = this.password.slice(0, 6);
      // return
      this.$post(this.URL.home.level_buy, {
        // levelId:this.levelId,
        level: this.level,
        password: this.$md5(pass),
        // password:this.$md5(this.password)
      }).then((res) => {
        if (res.code == 0) {
          this.levelId = "";
          this.password_show = false;
          this.password = "";
          this.getList();
          this.getLevel();
          this.$toast(res.message);
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url, level) {
      this.SET_GEADE(level);
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.bet {
  li {
    width: 32.33%;
  }
}

.count-down-box {
  display: flex;
  align-items: center;
  justify-content: center;

  .count-down {
    //color: #0EEF68;
    font-size: 0.28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.12rem;

    .van-count-down {
      color: #fff;
      font-size: 0.28rem;
    }
  }
}

.box1 {
  background: url("../../assets/images/bg-1.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 0.12rem;
  margin-bottom: 0.32rem;
  padding: 0.34rem 0.24rem;

  .name {
    font-size: 0.32rem;
    font-weight: 500;
    line-height: 0.32rem;
    margin-bottom: 0.3rem;

    span {
      font-size: 0.22rem;
      font-style: italic;
    }

    img {
      vertical-align: middle;
      height: 0.2rem;
      margin-left: 0.06rem;
    }
  }

  li {
    text-align: center;

    &:last-child {
      border-left: 1px solid #47464a;
    }
  }

  .s {
    font-size: 0.36rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 0.36rem;
    margin-bottom: 0.16rem;
  }

  .n {
    font-size: 0.24rem;
    color: #ababb2;
    line-height: 0.33rem;
  }
}

.box2 {
  margin-top: 0.36rem;
  margin-bottom: 1.3rem;

  .it {
    margin-bottom: 0.24rem;
    padding: 0.24rem 0.24rem 0.32rem 0.24rem;
    //background: var(--CObackgroundLinear2);
    background: url("../../assets/images/center_card_bg.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 0.2rem;

    .btn {
      color: #693f13;
    }
  }

  .title {
    background: url("../../assets/images/j3.png") no-repeat;
    width: 3.61rem;
    height: 0.63rem;
    text-align: center;
    background-size: 100% 100%;
    line-height: 0.63rem;
    margin: 0 auto;
    margin-top: -0.4rem;
  }

  .tit {
    font-size: 0.32rem;
    margin-bottom: 0.24rem;
    display: flex;
    align-items: center;
    border-bottom: 0.02rem solid #22222d;
    margin-left: 0.78rem;
    border-bottom: 1px solid var(--color-white-5, #ffffff0d);
    padding-bottom: 0.26rem;

    img {
      height: 0.3rem;
      margin-right: 0.12rem;
    }
  }

  ul {
    text-align: center;
    margin-bottom: 0.3rem;
  }

  .s {
    font-size: 0.32rem;
    font-weight: 500;
    line-height: 0.45rem;
    margin-bottom: 0.08rem;
  }

  .s2 {
    color: #ffdd9a;
    font-size: 0.24rem;

    span {
      font-size: 0.36rem;
      margin-right: 0.06rem;
    }
  }

  .n {
    font-size: 0.24rem;
    color: var(--COcolor1);
    line-height: 0.33rem;
  }

  button {
    height: 0.8rem;
    font-size: 0.28rem;
  }
}

.btn1 {
  border: 0.02rem solid #ffed90;
  background: linear-gradient(180deg,
  rgba(253, 224, 113, 0) 0%,
  rgba(253, 224, 113, 0.1) 100%);
  font-weight: 400;
  color: #ffdd9a;
}

.btn2 {
  background: linear-gradient(90.01deg, #f8f8e0 0.01%, #f5b975 99.99%);
  color: #693f13;
}

.btn3 {
  color: #ffffff !important;
  border-radius: 1.6rem;
  background: #2d2d2b !important;
}

.head_list {
  padding: 0.24rem;
  background: url("../../assets/images/center_card_bg.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 0.2rem;
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-top: 0.22rem;
  margin-bottom: 0.36rem;

  .title {
    margin-bottom: 0.24rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.28rem;

    .levt {
      font-size: 0.24rem;
      font-weight: 500;
      margin-bottom: 0.12rem;
    }

    img {
      margin: 0rem 0.12rem;
      height: 0.28rem;
    }

    .levt_name {
      //styleName: test01.topone99999.info/Sora/SemiBold 16;
      font-family: var(--fontfamilyFont1);
      font-size: 0.32rem;
      font-weight: 600;
      color: #FFDD9A;
    }

    .lv-img {
      position: relative;
      width: 1.6rem;
      height: 0.58rem;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: end;

      span {
        position: relative;
        z-index: 1;
        font-family: Inter;
        font-size: 0.28rem;
        font-weight: 700;
        font-style: italic;
        transform: translate(-0.18rem, 0.12rem);
        color: #693F13;
      }

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 100%;
        background: url("../../assets/images/V0.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  ul {
    background: linear-gradient(90deg, #FAD7A6 0%, #DAAB6A 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0.12rem;
    border-radius: 0.16rem;

    li {
      width: 100%;
      padding: 0.38rem 0.1rem;
      //padding: 0.36rem 0.38rem;

      .data {
        text-align: center;
        font-size: 0.32rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #FFDD9A;
      }

      .til {
        margin-top: 0.24rem;
        color: var(--COcolor1);
        text-align: center;
        font-size: 0.24rem;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }
}

.sp {
  font-weight: 600;
  font-size: 0.32rem;
  color: #ffdd9a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;

  &:before {
    content: " ";
    display: inline-block;
    width: 0.64rem;
    height: 0.34rem;
    background: url("../../assets/images/sp.png") no-repeat;
    background-size: 100% 100%;
  }

  &:after {
    content: " ";
    display: inline-block;
    width: 0.64rem;
    height: 0.34rem;
    background: url("../../assets/images/sp.png") no-repeat;
    background-size: 100% 100%;
    transform: rotateY(180deg);
  }
}
</style>
